<template>
    <view class="container">
       
        
        <!-- 公告列表 -->
        <view class="notice-list">
            <view class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="goDetail(item.id)">
                <!-- 公告标题 -->
                <view class="notice-title">
                    {{ item.title }}
                    <!-- 未读标记 -->
                </view>
                
                <!-- 公告时间和来源 -->
                <view class="notice-info">
                    <text class="notice-time">{{ item.time }}</text>
                    <text class="notice-source">{{ item.source }}</text>
                </view>
            </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="loading">
            加载中...
        </view>
        <view class="load-more" v-else-if="noMore">
            已加载全部内容
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentType: 0, // 当前筛选类型：0-全部，1-重要通知，2-活动公告，3-系统通知
            searchKey: '', // 搜索关键词
            noticeList: [], // 公告列表数据
            page: 1, // 当前页码
            pageSize: 10, // 每页数量
            loading: false, // 是否正在加载
            noMore: false, // 是否没有更多数据
        }
    },
    onLoad() {
        // 页面加载时获取公告列表
        this.getNoticeList();
    },
    methods: {
        // 获取公告列表
        getNoticeList() {
            if (this.loading || this.noMore) return;
            
            this.loading = true;
            
            // 模拟请求数据
            setTimeout(() => {
                // 生成模拟数据
                const newList = this.generateMockData(this.page);
                
                if (newList.length < this.pageSize) {
                    this.noMore = true;
                }
                
                if (this.page === 1) {
                    this.noticeList = newList;
                } else {
                    this.noticeList = [...this.noticeList, ...newList];
                }
                
                this.page++;
                this.loading = false;
            }, 800);
        },
        
        // 生成模拟数据
        generateMockData(page) {
            const types = [
                { id: 1, name: '重要通知', className: 'tag-important' },
                { id: 2, name: '活动公告', className: 'tag-activity' },
                { id: 3, name: '系统通知', className: 'tag-system' }
            ];
            
            const list = [];
            const total = page === 1 ? 8 : 5; // 第一页8条，其他页5条
            
            for (let i = 0; i < total; i++) {
                const type = types[Math.floor(Math.random() * types.length)];
                const isNew = page === 1 && i < 3; // 第一页前3条为新消息
                
               
            }
            
            return list;
        },
        
        // 格式化日期
        formatDate(date) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        },
        
        // 搜索输入事件
        onSearchInput(e) {
            this.searchKey = e.detail.value;
            // 可以在这里添加搜索逻辑
        },
        
        // 切换分类
        changeType(type) {
            if (this.currentType === type) return;
            
            this.currentType = type;
            this.page = 1;
            this.noMore = false;
            this.getNoticeList();
        },
        
        // 前往公告详情页
        goDetail(id) {
            uni.navigateTo({
                url: `/pages/Notice/detail?id=${id}`
            });
        },
        
        // 下拉刷新
        onPullDownRefresh() {
            this.page = 1;
            this.noMore = false;
            this.getNoticeList();
            uni.stopPullDownRefresh();
        },
        
        // 上拉加载更多
        onReachBottom() {
            this.getNoticeList();
        }
    }
}
</script>

<style>
.container {
    background-color: #f8f8f8;
    min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
    height: 44px;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
}

/* 搜索框样式 */
.search-box {
    padding: 10px;
    background-color: #FFFFFF;
}

.search-input {
    height: 34px;
    background-color: #f2f2f2;
    border-radius: 17px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.search-input .iconfont {
    color: #999999;
    font-size: 16px;
    margin-right: 5px;
}

.search-input input {
    flex: 1;
    font-size: 14px;
    color: #333333;
}

/* 分类筛选样式 */
.filter-tabs {
    display: flex;
    background-color: #FFFFFF;
    border-bottom: 1px solid #eeeeee;
}

.tab-item {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #666666;
    position: relative;
}

.tab-item.active {
    color: #007AFF;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #007AFF;
}

/* 公告列表样式 */
.notice-list {
    padding: 0 15px;
}

.notice-item {
    padding: 15px 0;
    border-bottom: 1px solid #eeeeee;
}

.notice-tag {
    display: inline-block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 5px;
}

.tag-important {
    background-color: #FFEBEB;
    color: #F56C6C;
}

.tag-activity {
    background-color: #FFF6E0;
    color: #FF9800;
}

.tag-system {
    background-color: #E8F3FF;
    color: #409EFF;
}

.notice-title {
    font-size: 16px;
    color: #333333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.unread-dot {
    width: 6px;
    height: 6px;
    background-color: #FF5252;
    border-radius: 50%;
    margin-left: 5px;
}

.notice-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999999;
}

/* 加载更多样式 */
.load-more {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: #999999;
}
</style>
    